<template>
    <div :id="id" :style="style">
    </div>
</template>
<script setup lang='ts'>
import * as echarts from 'echarts';
import {mapSet,mapData} from "../api/system"
import {computed, onMounted, watch} from "vue"
let config:ResData
let data:ResData
const props=defineProps({
    w:{
        type:String,
        default:'600px'
    },
    h:{
        type:String,
        default:'600px'
    },
    id:{
        type:String,
        default:'main'
    }
})
const emit=defineEmits()

const style=computed(()=>{
    return {
        width:props.w,
        height:props.h
    }
})
const getData=async ()=>{// 获取地图数据配置
   config=await mapSet() as ResData// 地图配置 经纬度
   data=await mapData() as ResData// 地图数据 户口位置
//    console.log(config.data);
   initMap(config.data,data.data)// 加载地图
   
}
watch(props,()=>{
   initMap(config.data,data.data)
})

const initMap=(data:any,scatterData:any=[])=>{
       if(!document.getElementById(props.id))return
        const myChart = echarts.init(document.getElementById(props.id));// 初始化地图位置
        var colors = ['#FF8C00', '#00acea', '#1DE9B6'];
        echarts.registerMap('county', data);// data 为地图配置
        myChart.off('click').on('click', function (params:Obj) {// 地图点击事件
            
            let data = myChart.convertFromPixel('geo', [params?.event.offsetX, params.event.offsetY])
            // console.log(data);
            emit("map-click",data)
            
        });
        let option = {
            //背景色
            // backgroundColor: '#fff',
            title:{
                text:'xxxx村地貌堪舆图',
               
            },
            color: ['#FF8C00', '#00acea', '#1DE9B6'],
            tooltip: {
                trigger: 'item',
                formatter: '{b}'
            },
           
            geo: {
                map: 'county',
                show: false
            },
            series: [
                {
                type: 'map',
                map: 'county',
                aspectScale: 0.75,
                itemStyle: {
                    borderColor: 'rgba(100,149,237,1)',
                    borderWidth: 2,
                    areaColor: 'rgb(22, 113, 155)',
                    
                },
                label: {
                    show: true,
                    textStyle: {
                        color: '#fff'
                    },
                    emphasis: {
                        textStyle: {
                            color: '#fff'
                        }
                    }
                },
                emphasis: {
                    label: {
                        show: true
                    },
                    itemStyle: {
                        areaColor: 'rgb(22, 113, 155)',
                    }
                }

            }, 
            {
                type: 'effectScatter',
                coordinateSystem: 'geo',
                showEffectOn: 'render',
                rippleEffect: {
                    period: 5,
                    scale: 3,
                    brushType: 'fill'
                },
                hoverAnimation: false,
                label: {
                    formatter: '{b}',
                    position: 'right',
                    offset: [1, 0],
                    color: (param:Obj) => colors[param.dataIndex % colors.length],
                    show: true
                },
                itemStyle: {
                    color: (param:Obj) => {
                        return colors[param.dataIndex % colors.length];
                    },
                    shadowBlur: 1,
                    shadowColor: '#333',
                    opacity: 0.5
                },
                emphasis: {
                    itemStyle: {
                        opacity: 1, //线条宽度
                    }
                },
                data: scatterData// scatterData为数据
            }
        ]
        };

          myChart.setOption(option); //绘图
      
    }
onMounted(()=>{
   getData()
})
</script>
<style scoped >
#main{
    width: 600px;
    height: 600px;
}
</style>
